<script setup lang="ts">
import chatu1 from '@/assets/preview2.png'
import { ref } from 'vue';
const active = ref(1)
</script>
<template>
    <div  @click="$router.push('/preview/guide3')">
        <p class="skip "@click="$router.push('/login')">跳过</p>
        <br>
        <div class="container">
            <section>

                <van-image width="160" height="160" :src="chatu1"></van-image>
            </section>
            <div class="des">
                <p class="des1">
                    <span>
                        与百万程序员一起成长！
                    </span>

                </p>

                <p class="des2">
                    <span>慕课网，程序员的学习乐园。
                        我们汇聚了顶尖的技术专家与实战项目，
                        让你在实战中提升，在交流中进步。
                        立即加入，和我们一起，
                        用代码创造未来，让梦想照进现实！ </span>
                </p>
            </div>

        </div>
        <van-steps :active="active" active-color="#f66">
            <van-step>0</van-step>
            <van-step>0</van-step>
            <van-step>0</van-step>

        </van-steps>
       
    </div>
    <div class="login" @click="$router.push('/login')">
        <van-button >立即登录</van-button>
    </div>
</template>
<style lang="scss" scoped>
.skip {
    color: blue;
    float: right;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-right: 20vw;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100vw;

    .des {
        height: 40vw;
        width: 70vw;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        margin-top: 0.6rem;

        .des1 {

            font-size: 0.18rem;
            display: flex;
            flex-direction: column;
            text-align: center
        }

        .des2 {
            width: 70vw;
            font-size: 0.12rem;
            color: #ccc;
            text-align: center;
        }


    }
}

.van-steps--horizontal {
    width: 40vw;
    margin: 20px auto;
}

.login {
    display: flex;
    justify-content: center;
    margin-top: 40px;

    .van-button {
        color: blue;
        width: 70vw;
    }
}
</style>